import styled from "styled-components";
import logo from '../../asset/log.png'

export const HeaderWrapper = styled.div`
position:relative;
line-height:58px;
border-bottom:1px solid #f0f0f0;
`;
export const Logo = styled.a.attrs({
    href: '/'
})`
position:absolute;
top:0;
left:0;
width:100px;
height:58px;
background:url(${logo});
background-size:contain;
`;
export const SearchWrapper = styled.div`
position:relative;
float:left;

.zoom{
position:absolute;
text-align:center;
right:5px;
bottom:13px;
width:30px;
line-height:30px;
border-radius:15px;
&.focus{
background:#777;
color:#fff;
}
}
`;
export const Nav = styled.div`
width:960px;
height:100%;
margin:0 auto;
`;
export const NavItem = styled.div`
line-height:56px;
padding:0 15px;
color:#333
&.left{
float:left
}
&.right{
float:right;
color:#969696;
}
&.active{
color:#ea6f5a
}
`;
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
&.slide-enter{
transition:all .2s ease-out;
}
&.slide-enter-active{
width:240px;
}
&.slide-exit{
transition:all .2s ease-out
}
&.slide-exit-active{
width:160px
}
width:160px;
height:38px;
border:none;
outline:none;
border-radius:19px;
margin-left:20px;
padding:0 40px 0 20px;
background:yellow;
box-sizing:border-box;
background:#eee;
font-size:14px;
color:#666;
&::placeholder{
color:#999
}
&.focus{
width:240px;
}
`;
export const SearchM =  styled.div`
position:absolute;
left:0;
top:56px;
width:240px;
padding:0 20px;
color:#969696
box-shadow:0 0 8px rgba(0,0,0,.2)

`
export const Mtitle =  styled.div`
margin-top:20px;
margin-bottom:15px;
line-height:20px;
font-size:14px;
`
export const Msw = styled.span`
float:right;
font-size:13px;
.spin{
font-size:12px;
margin-right:6px;
float:left;
transition:all .2s;
transform:rotate(0deg);
transform-origin:center center;
}
`
export const InfoItem = styled.a`
float:left;
line-height:20px;
padding:0 5px;
font-size:12px;
border:1px solid #ddd;
border-radius:3px;
margin-right:10px;
margin-bottom:10px;
`
export const Addition = styled.div`
position:absolute;
right:0;
top:0;
height:56px;
`
export const Button = styled.div`
float:right;
border-radius:19px;
line-height:38px;
padding:0 20px;
margin-top:9px;
margin-right:20px;
border:1px solid #ea6f49;
&.reg{
color:#ea6f5a
}
&.writing{
color:#fff;
background:#ea6f5a
}
`
